<template>
	<view class="content">
		<view class="padding-about-30 padding-top-30">
			<view class="display-flex align-items">
				<image src="/static/jb.png" style="width: 27rpx;height: 27rpx;" mode=""></image>
				<view class="font-size-28 margin-left-20 font-weight-bold">
					可提现积分：{{userinfo.score}}
				</view>
			</view>
			<view class="view margin-top-20">
				<view class="font-size-28">
					提现数量
				</view>
				<view class="input display-flex align-items center margin-top-20">
					<input type="number" v-model="num" class="font-size-26" style="width: 90%;" placeholder="请输入提现数量" />
				</view>
				<view class="margin-top-40 font-size-28">
					提现数量
				</view>
				<view @click="chooseImage"
					class="textarea display-flex flex-direction-column align-items center margin-top-20">
					<view v-if="!image" class="up display-flex align-items center">
						<image src="/static/up.png" style="width: 138rpx;height: 138rpx;" mode=""></image>
					</view>
					<view v-if="!image" class="font-size-26 margin-top-40">
						上传收款码
					</view>
					<image v-else :src="image" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</view>
				<view class="margin-top-40 font-size-28">
					提现规则
				</view>
				<view v-for="item,index in userinfo.withdraw_int" class="font-size-24 margin-top-20">
					{{index + 1}}、{{item}}
				</view>
				<view class="display-flex margin-top-120 flex-direction-column center">
					<view @click="withdraw()" class="button text-center color-FFF font-size-26"
						style="padding: 25rpx 226rpx;width: 150rpx;">
						确认提现
					</view>
				</view>
				<view @click="navigateTo('/pages/my/withdrawalRecord')" class="font-size-24 margin-top-40 text-center">
					提现记录
				</view>
			</view>
		</view>
		<div class="kong"></div>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const userinfo = ref(local.get('userinfo'))
	const num = ref('')
	const image = ref('')
	onLoad(function(option) {});
	onShow(function() {});
	async function withdraw(){
		let object = {
			account:num.value,
			image:image.value
		}
		const {code,data} = await api.withdraw(object)
		if(code == 1){
			nativeUI('申请成功！')
			navigateBack(2000)
		}
	}
	/**
	 * 修改头像
	 */
	async function chooseImage() {
		const {
			errMsg,
			tempFilePaths,
			tempFiles
		} = await uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		})
		console.log(tempFilePaths);
		if (errMsg == 'chooseImage:ok') {
			for (var i = 0; i < tempFilePaths.length; i++) {
				uploadFilePromise(tempFilePaths[i])
			}

		}
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFilePromise(url)
		if (code == 1) {
			image.value = data.fullurl
			// userinfo.value.avatar = id
			// userinfo.value.avatar_url = path
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.up {
		width: 294rpx;
		height: 294rpx;
		background: #F8F8F7;
		border-radius: 10rpx;
	}

	.textarea {
		width: 610rpx;
		height: 521rpx;
		border-radius: 10rpx;
		border: 1px solid #333333;
	}

	.input {
		width: 610rpx;
		height: 80rpx;
		border-radius: 10rpx;
		border: 1px solid #333333;
	}

	.view {
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>